<template>
  <base-paenl>
    <span slot="header">外业情况</span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        class="panel-item"
        @click="showDialog(item)"
      >
        <div
          :class="
            item.name == '房屋大数据全域核查数'
              ? 'panel-row2 clickable'
              : 'panel-row2'
          "
        >
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div
              class="panel-row-content-name panel-row-content-name1"
              :title="item.name"
            >
              {{ item.name }}
            </div>
            <div
              class="panel-row-content-value panel-row-content-value1"
              :title="item.value"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
        <div
          v-if="item.children && item.key != 'zlfyhcs'"
          class="panel-second-row3"
        >
          <div
            v-for="(subItem, subIndex) of item.children"
            :key="subIndex"
            class="panel-second-content"
          >
            <div class="panel-second-content-name">{{ subItem.name }}</div>
            <div class="panel-second-content-value">{{ subItem.value }}</div>
          </div>
        </div>
        <div
          v-if="item.children && item.key == 'zlfyhcs'"
          class="panel-second-row4"
        >
          <div class="panel-third-row">
            <div class="panel-third-content">
              <div class="panel-third-content-name">
                {{ item.children.gfxcs.name }}
              </div>
            </div>
          </div>
          <div class="panel-four-row">
            <div class="panel-four-content">
              <div class="panel-four-content-name">
                {{ item.children.gfxcs.children.zz.name }}
              </div>
              <div class="panel-four-content-value">
                {{ item.children.gfxcs.children.zz.value }}
              </div>
            </div>
            <div class="panel-four-content">
              <div class="panel-four-content-name">
                {{ item.children.gfxcs.children.fzz.name }}
              </div>
              <div class="panel-four-content-value">
                {{ item.children.gfxcs.children.fzz.value }}
              </div>
            </div>
          </div>
          <div class="panel-third-row">
            <div class="panel-third-content">
              <div class="panel-third-content-name">
                {{ item.children.bzxzlzfxms.name }}
              </div>
              <div class="panel-third-content-value">
                {{ item.children.bzxzlzfxms.value }}
              </div>
            </div>
            <div class="panel-third-content">
              <div class="panel-third-content-name">
                {{ item.children.zcxschxcs.name }}
              </div>
              <div class="panel-third-content-value">
                {{ item.children.zcxschxcs.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getFieldSituation, getGlobalCheck } from "@/assets/modules/service";

@Component({
  name: "FieldSituation",
  components: { BasePaenl }
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData() {
    this.getFieldSituation();
  }
  dataList: any = [];
  globalCheckData: any = [];
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.fieldSituation;
    // this.getGlobalCheck();
    this.getFieldSituation();
  }
  getFieldSituation() {
    const data: any = {
      kssj: this.datePickerValue[0] ?? "",
      jssj: this.datePickerValue[1] ?? "",
      code: this.areaData.areaCode,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList
    };
    getFieldSituation(data).then((res: any) => {
      if (res?.data) {
        this.dataList.fwdsjqyhcs.value = res.data.fwdsjqyhcs;
        this.dataList.zlxmxcs.value = res.data.zlxmxcs;
        this.dataList.zlxmxcs.children.ybxms.value = res.data.ybxms;
        this.dataList.zlxmxcs.children.bzfxms.value = res.data.bzfxms;
        this.dataList.zlxmxcs.children.cbxms.value = res.data.cbxms;
        this.dataList.zlqyxcs.value = res.data.zlqyxcs;
        this.dataList.zjjgmdxcs.value = res.data.zjjgmdxcs;
        this.dataList.zlfyhcs.value = res.data.zlfyhcs;
        this.dataList.zlfyhcs.children.gfxcs.children.zz.value =
          res.data.gfxcszz;
        this.dataList.zlfyhcs.children.gfxcs.children.fzz.value =
          res.data.gfxcsfzz;
        this.dataList.zlfyhcs.children.bzxzlzfxms.value = res.data.bzxzlzfxms;
        this.dataList.zlfyhcs.children.zcxschxcs.value = res.data.zcxschxcs;
      } else {
        this.dataList.fwdsjqyhcs.value = 0;
        this.dataList.zlxmxcs.value = 0;
        this.dataList.zlxmxcs.children.ybxms.value = 0;
        this.dataList.zlxmxcs.children.bzfxms.value = 0;
        this.dataList.zlxmxcs.children.cbxms.value = 0;
        this.dataList.zlqyxcs.value = 0;
        this.dataList.zjjgmdxcs.value = 0;
        this.dataList.zlfyhcs.value = 0;
        this.dataList.zlfyhcs.children.gfxcs.children.zz.value = 0;
        this.dataList.zlfyhcs.children.gfxcs.children.fzz.value = 0;
        this.dataList.zlfyhcs.children.bzxzlzfxms.value = 0;
        this.dataList.zlfyhcs.children.zcxschxcs.value = 0;
      }
    });
  }
  getGlobalCheck() {
    const data: any = {
      dataTime: this.datePickerValue
    };
    getGlobalCheck(data).then((res: any) => {
      if (res?.data) {
        this.globalCheckData = res.data;
      } else {
        this.globalCheckData = [];
      }
      this.$store.commit("panelData/setGlobalCheckData", this.globalCheckData);
    });
  }
  showDialog(item: any) {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
      new Date().getMonth() + 1
    ) {
    } else {
      if (item.name == "房屋大数据全域核查数" && this.areaData.areaType == 0) {
        this.$store.commit("panel/setDialogShow", false);
        this.$nextTick(() => {
          this.$store.commit("panel/setDialogShow", true);
          this.$store.commit("panel/setDialog", "globalCheck");
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 333px;
}
.panel-row2 {
  position: relative;
  width: 404px;
  height: 33px;
  .panel-row-bg {
    position: absolute;
    width: 404px;
    height: 16px;
    background-image: url(../../assets/images/panels/liebiaoshuangtiaokuang.png);
    background-size: 100% 100%;
    opacity: 0.5;
    margin-top: 9px;
  }
  .panel-row-content {
    position: absolute;
    top: 0;
    left: 20px;
    width: 384px;
    height: 14px;
    display: flex;
  }
  .panel-row-content-name {
    width: 140px;
    height: 20px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 20px;
    color: #b4d8f7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panel-row-content-name1 {
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    color: #ffffff;
  }
  .panel-row-content-value {
    width: 230px;
    height: 20px;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panel-row-content-value1 {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    color: #3998ff;
  }
}
.panel-second-row4 {
  width: 100%;
  .panel-third-row {
    width: 100%;
    height: 25px;
    display: flex;
  }
  .panel-third-content {
    width: 50%;
    display: flex;
    padding: 10px 0 0 10px;
  }
  .panel-third-content-name {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 17px;
    color: #b4d8f7;
  }
  .panel-third-content-value {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 14px;
    line-height: 17px;
    color: #fad06d;
  }
  .panel-four-row {
    width: 100%;
    display: flex;
  }
  .panel-four-content {
    width: 50%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin: 10px;
    background-image: url(../../assets/images/panels/zhuzhaidizuo.png);
    background-size: 100% 100%;
  }
  .panel-four-content-name {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 17px;
    color: #b4d8f7;
  }
  .panel-four-content-value {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 14px;
    line-height: 17px;
    color: #fad06d;
  }
}
</style>
